import React, { Component } from "react";

class Lifetwo extends Component {
  state = {
    arr: ["html", "css", "js", "es6", "nodejs"],
  };

  inputvalue = React.createRef();
  divvalue = React.createRef();

  componentDidUpdate() {
    console.log(this.divvalue.current);
    this.divvalue.current.scrollTop = this.divvalue.current.scrollHeight;
  }

  addvalue = () => {
    let newvalue = this.inputvalue.current.value;
    this.setState({ arr: [...this.state.arr, newvalue] });

    this.inputvalue.current.value = "";
  };
  render() {
    return (
      <>
        <input type="text" ref={this.inputvalue} />{" "}
        <button onClick={this.addvalue}>点击</button>
        <div
          style={{
            width: "200px",
            height: "100px",
            border: "1px solid pink",
            margin: "20px 0",
            overflow: "auto",
          }}
          ref={this.divvalue}
        >
          {this.state.arr.map((item, index) => {
            return <li key={index}>{item}</li>;
          })}
        </div>
      </>
    );
  }
}

export default Lifetwo;
